<template>
	<view class="body">
		<!-- 顶部导航栏 -->
		<!-- <u-navbar :is-back="false" :bgColor="background" height="70" :border-bottom="false">
			<view class="slot-wrap">
				<text class="nav-title">香哈菜谱大全</text>
				<text class="nav-subtitle">小白学做菜必备烹饪助手</text>
			</view>
		</u-navbar> -->
		<view class="content">
			<view class="head-color"></view>
			<!-- 顶部显示共有多少道菜 -->
			<view class="total">
				<text>共有100道菜</text>
			</view>
			<!-- 轮播图 -->
			<view class="wrap">
				<swiper circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
					<swiper-item v-for="item in swiperList" :key="item._id">
						<view class="swiper-item uni-bg-red">
							<image :src="item.image_src" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 宫格布局 -->
			<u-grid :col="5">
				<view>
					<u-grid-item v-for="(item,index) in catitemList" :key="item._id"
					@click="turnToCategories(item)">
						<u-icon :name="item.image_src" :size="50"></u-icon>
						<view class="grid-text">{{item.name}}</view>
					</u-grid-item>
				</view>
			</u-grid>
			<!-- 首页楼层 -->
			<view class="floor">
				<view class="floor-left">
					<swiper class="floor-lefts" circular :indicator-dots="true"
					 :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="item in floorList[0].floor_imgs" :key="index">
							<image :src="item" mode="scaleToFill"></image>
						</swiper-item>
					</swiper>
					<text class="left-text">{{floorList[0].floor_title}}</text>
				</view>
				<view class="floor-right">
					<view class="right1">
						<image
						class="right-images"
						 :src="floorList[1].floor_imgs" mode="widthFix"></image>
						<text class="right-text1">{{floorList[1].floor_title}}</text>
					</view>
					<view class="right1">
						<image 
						class="right-images"
						:src="floorList[2].floor_imgs" mode="widthFix"></image>
						<text class="right-text2">{{floorList[2].floor_title}}</text>
					</view>
				</view>
			</view>
			<!-- 首页商品推荐 -->
			<view class="recommands">
				<view class="rec-item" v-for="item in recommendList" :key="item._id"
				   @tap="turnToSearchMenu">
					<image :src="item.coverpic" mode="" class="rec-image"></image>
					<text>{{item.name}}</text>
					<view class="rec-bottom">
						<view class="rec-bottom-left">
							<text class="rec-subtitle">{{item.pageview}}</text>
							<image src="https://s1.ax1x.com/2022/07/28/vp7fW4.png" mode="" class="rec-bottom-image"></image>
						</view>
						<view class="rec-bottom-right">
							<text class="rec-subtitle">{{item.collections}}</text>
							<image src="https://s1.ax1x.com/2022/07/28/vp7WYF.png" mode="" class="rec-bottom-image"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapState: homeMapState,
		mapMutations: homeMapMutations
	} = createNamespacedHelpers("homeModule")

	export default {
		data() {
			return {
				status: true,
				background: 'linear-gradient(45deg, rgb(238, 129, 49), rgb(240, 154, 55))',
			}
		},
		methods: {
			...homeMapMutations(['swi', 'changeNav']),
			//发送异步请求
			async findData() {
				//轮播图
				let swiper = await this.$api.home.swiperData()
				let swiperMessage = swiper.data.message

				//分类
				let catitem = await this.$api.home.catitemsData()
				let catitemMessage = catitem.data.message

				//楼层
				let floor = await this.$api.home.floorsData()
				let floorMessage = floor.data.message

				//推荐商品
				let recommend = await this.$api.home.recommendData()
				let recommendMessage = recommend.data.message

				let homerequst = {
					swiperMessage,
					catitemMessage,
					floorMessage,
					recommendMessage
				}
				this.swi(homerequst)
				// console.log(homerequst);
				// console.log(this.swiperList);
				// console.log(this.recommendList);
				// console.log(this.floorList);
			},
			// 点击图标跳转到分类
			turnToCategories(event) {
				console.log(event);
				const name=event.name
				if (name=='分类') {
					uni.navigateTo({
						url:"/pagesA/sort/sort"
					})
				}else{
					uni.navigateTo({
						url:"/pagesA/list/list?obj=name"
					})
				}
			}
		},
		computed: {
			...homeMapState(['swiperList', 'catitemList', 'floorList', 'recommendList'])
		},
		created() {
			this.findData()
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		flex-direction: column;
		color: #fff;
		padding: 0 25rpx;

		.nav-title {
			font-weight: bolder;
			font-size: 40rpx;
		}

		.nav-subtitle {
			font-size: 25rpx;
			margin-top: 10rpx;
		}
	}

	.content {
		.head-color {
			width: 100%;
			height: 40rpx;
			background-image: linear-gradient(45deg, rgb(238, 129, 49), rgb(240, 154, 55));
		}

		.total {
			width: 660rpx;
			height: 80rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 80rpx;
			margin-top: -40rpx;
			border-radius: 40rpx;
			background-color: #fff;
			box-shadow: 3rpx 3rpx 3rpx 3rpx #f5f5f5;
			color: #a8a8a8;
		}

		// 轮播
		.wrap {
			padding-left: 90rpx
		}


		//宫格布局
		.grid-text {
			font-size: 28rpx;
			// color: $u-type-info;
		}

		//楼层
		.floor {
			display: flex;
			padding: 0 30rpx;
			height: 380rpx;

			.floor-left {
				width: 334rpx;
				height: 380rpx;
				flex-shrink: 0;
				position: relative;
				.floor-lefts{
					height: 100%;
				}

				.left-text {
					background-color: #e59e6c;
					width: 164rpx;
					height: 56rpx;
					color: #fff;
					line-height: 56rpx;
					text-align: center;
					border-radius: 10rpx;
					opacity: 0.75;
					position: absolute;
					top: 10rpx;
					left: 10rpx;
				}
			}

			.floor-right {
				width: 332rpx;
				height: 360rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.right1 {
					margin-left: 30rpx;

					&:last-child {
						margin-top: 10rpx;
					}
				}

				.right-images {
					width: 332rpx;
					height: 160rpx;
				}

				.right-text1 {
					background-color: #e59e6c;
					width: 164rpx;
					height: 56rpx;
					color: #fff;
					line-height: 56rpx;
					text-align: center;
					border-radius: 10rpx;
					opacity: 0.75;
					position: absolute;
					top: 10rpx;
					left: 40rpx;
				}

				.right-text2 {
					background-color: #e59e6c;
					width: 164rpx;
					height: 56rpx;
					color: #fff;
					line-height: 56rpx;
					text-align: center;
					border-radius: 10rpx;
					opacity: 0.75;
					position: absolute;
					top: 207rpx;
					left: 40rpx;
				}
			}
		}

		//首页商品推荐
		.recommands {
			padding: 0 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.rec-item {
				width: 334rpx;
				height: 345rpx;

				.rec-image {
					width: 334rpx;
					height: 248rpx;
					border-radius: 10rpx;
				}

				.rec-subtitle {
					font-size: 27rpx;
					color: #aaa;
				}

				.rec-bottom {
					display: flex;

					.rec-bottom-left {
						margin-right: 30rpx;
						display: flex;
						align-items: center;
					}

					.rec-bottom-right {
						display: flex;
						align-items: center;
					}

					.rec-bottom-image {
						width: 28rpx;
						height: 25rpx;
						margin-left: 10rpx;
					}
				}

			}
		}
	}
</style>
